<template>
  <!-- 场景-运行结果 -->
  <div class="resultScene-data">
    <el-row class="ruleResultScene container">
      <el-col style="margin-right:10px;" class="content-left">
        <!-- 操作区域 -->
        <upper-template
          @search="searchResultSceneForm.page=1,searchResultSceneFunc()"
          @clear="(searchResultSceneForm.ruleName = ''),(searchResultSceneForm.runResult = '')"
        >
          <!-- 搜索区 -->
          <template slot="searchArea">
            <el-form
              :model="searchResultSceneForm"
              ref="searchResultSceneForm"
              label-width="87px"
              label-position="left"
              size="mini"
            >
              <el-form-item label="规则名称：">
                <el-input
                  v-model="searchResultSceneForm.ruleName"
                  style="width:150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="运行结果">
                <el-select v-model="searchResultSceneForm.runResult" style="width:150px">
                  <el-option label="成功" value="1"></el-option>
                  <el-option label="失败" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </template>
          <!-- 显示隐藏区 -->
          <template slot="columnHide">
            <el-checkbox-group v-model="checkResultSceneList">
              <el-checkbox
                v-for="item in textResultSceneData"
                :label="item.label"
                :key="item.prop"
                >{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </upper-template>

        <el-table ref="multipleResultSceneTable" :data="tableResultSceneData" style="width: 100%">
          <el-table-column
            width="55"
            type="selection"
            
          ></el-table-column>
          <el-table-column
            prop="ruleCode"
            label="规则编码"
            :show-overflow-tooltip="true"
            v-if="columnResultSceneState[0]"
          >
          </el-table-column>
          <el-table-column
            prop="ruleName"
            label="规则名称 "
            :show-overflow-tooltip="true"
            v-if="columnResultSceneState[1]"
          >
          </el-table-column>

          <el-table-column
            prop="resultSceneCode"
            label="开始时间 "
            :show-overflow-tooltip="true"
            v-if="columnResultSceneState[2]"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.beginTime">
                {{ timeFormat(scope.row.beginTime) }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="endTime"
            label="结束时间 "
            :show-overflow-tooltip="true"
            v-if="columnResultSceneState[3]"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.endTime">
                {{ timeFormat(scope.row.endTime) }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="resultCount"
            label="影响记录数 "
            :show-overflow-tooltip="true"
            v-if="columnResultSceneState[4]"
          >
          </el-table-column>
          <el-table-column
            prop="runResult"
            label="运行结果 "
            :show-overflow-tooltip="true"
            v-if="columnResultSceneState[5]"
            :formatter="row => (row.runResult == 0 ? '失败' : '成功')"
          >
          </el-table-column>
        </el-table>
        <pagination
          @size-change="handleResultSceneSizeChange"
          @current-change="handleResultSceneCurrentChange"
          :current-page="searchResultSceneForm.page"
          :page-size="searchResultSceneForm.size"
          @refresh="searchResultSceneFunc"
          :total="resultSceneTotal"
        ></pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ruleScene } from "@/api/index";
import upperTemplate from "@/components/upperTemplate.vue"
import onlyOneSearch from "@/components/onlyOneSearch";
import moment from "moment";
export default {
  data() {
    return {
      // 列隐藏依据数据
      textResultSceneData: [
        { prop: "ruleCode", label: "规则编码", disabled: true },
        { prop: "ruleName", label: "规则名称", disabled: true },
        { prop: "beginTime", label: "开始时间", disabled: true },
        { prop: "endTime", label: "结束时间", disabled: true },
        { prop: "resultCount", label: "影响记录数", disabled: true },
        { prop: "runResult", label: "运行结果", disabled: true }
      ],
      // 显示的列
      checkResultSceneList: [],
      //查询时默认条件
      searchResultSceneForm: {
        page: 1,
        size: 15,
        ruleName: "",
        runResult: ""
      },
      //总条数
      resultSceneTotal: 0,
      tableResultSceneData: []
    };
  },
  props: {
    sceneCode: {
      type: String,
      default: ""
    }
  },
  watch: {
    sceneCode: function(newVal, oldVal) {
      this.sceneCode = newVal;
      newVal&&this.searchResultSceneFunc();
    }
  },
  components: {
    onlyOneSearch
  },
  created() {
    //初始化显示的列
    this.checkResultSceneListInit();
  },
  computed: {
    columnResultSceneState() {
      let arr = [],
        arr1 = this.textResultSceneData,
        arr2 = this.checkResultSceneList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    },
    sceneCodeStatus: function() {
      return this.sceneCode;
    }
  },
  mounted() {
    this.searchResultSceneFunc()
  },
  methods: {
    checkResultSceneListInit() {
      this.checkResultSceneList = this.textResultSceneData.map(v => {
        return v.label;
      });
    },
    searchResultSceneFunc() {
      let data= {
        sceneCode:this.sceneCode,
        ...this.searchResultSceneForm
      }
      ruleScene.queryRunResultPage(data).then(res => {
        if (res.code === 200) {
          this.tableResultSceneData = res.datas.rows;
          this.resultSceneTotal = res.datas.total;
        }
      });
    },
    timeFormat(val) {
      if (val) return moment(val).format("YYYY-MM-DD HH:mm:ss");
      else return "";
    },
    handleResultSceneSizeChange(val) {
      this.searchResultSceneForm.size = val;
      console.log(val, "每页数");
      this.searchResultSceneFunc();
    },
    handleResultSceneCurrentChange(val) {
      this.searchResultSceneForm.page = val;
      console.log(val, "当前页");
      this.searchResultSceneFunc();
    }
  }
};
</script>

<style lang="scss" scoped>
.dialogSearchBox {
  header {
    text-align: center;
    span {
      margin: 0 20px;
    }
  }
}
</style>